<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #f1f1f1;
            padding: 10px;
        }
        
        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        
        p {
            text-align: center;
            width: 100%;
        }
        
        input {
            width: 80%;
            margin: 0 auto;
            border: none;
            height: 30px;
            border: 1px solid #ccc;
            outline: none;
            margin-top: 1.5rem;
            padding-left: 10px;
        }
        
        .button {
            display: flex;
            width: 81%;
            justify-content: space-evenly;
            margin-top: 2rem;
        }
        
        .title {
            width: 80%;
            font-size: 16px;
            color: red;
            height: 20px;
        }
        
        button {
            width: 30%;
            border: none;
            border: 1px solid #ccc;
            height: 30px;
            background-color: #3B97FD;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>密码登录</p>
        <div class="title">
            <span></span>
        </div>
        <input type="text" id="username" name="username" placeholder="请输入账号">
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <div class="button">
            <button class="login">注册</button>
            <button class="long">登录</button>
        </div>

    </div>
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/config.js"></script>
    <script>
        //输入框验证
        $('#username').blur(function() {
            if ($('#username').val().length == 0) {
                $('.title').html('账号不能为空')
            } else if ($('#username').val().length >= 8 && $('#username').val().length <= 16) {
                $('.title').html('')
            } else {
                $('.title').html('请输入8-16位账号')
            }
        });
        $('#password').blur(function() {
            if ($('#password').val().length == 0) {
                $('.title').html('密码不能为空')
            } else {
                $('.title').html('')
            }
        })
        var REDIRECT_URI = encodeURIComponent(`${URl}/long`)
            //获取openid
        var openid = '';
        console.log();
        openid = "<%=mineDatas%>";
        if (openid.length == 0) {
            window.location.href =
                `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5bf80eec0759e69c&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
        };
        //点击登录
        $(".login").click(function() {
            window.location.href = '/login'
        })

        const settings = {
            "url": "http://58.210.112.60:38102/Wechat/Api/LoginWechat",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Content-Type": "application/json",
                "Accept": "*/*",
            },
            "data": JSON.stringify({
                "wechatId": openid
            }),
        };

        $.ajax(settings).done(function(res) {
            if (res.code == 200) {
                window.location.href = `bindingList?username=${res.data.UserName}&Authorization=${res.data.Authorization}`
            } else {
                $('.long').click(function() {
                    const settings = {
                        "url": "http://58.210.112.60:38102/Wechat/Api/LinkWechat",
                        "method": "POST",
                        "timeout": 0,
                        "headers": {
                            "Content-Type": "application/json",
                            "Accept": "*/*",
                        },
                        "data": JSON.stringify({
                            "wechatId": openid,
                            "username": $('#username').val(),
                            "password": $('#password').val(),
                            "autoRegister": "False"
                        }),
                    };

                    $.ajax(settings).done(function(res) {
                        if (res.code == 200) {
                            window.location.href = `bindingList?username=${res.data.UserName}&Authorization=${res.data.Authorization}`
                        } else {
                            window.alert(res.msg)
                        }

                    })

                })
            }
        });
    </script>
</body>

</html>